<div class="thongbao">
    <div class="mytooltip-alert"></div>
</div>
<table class="listing table table-bordered">
<tr>
    <th>ID</th>
    <th>Name</th>
    <th>Categories</th>
    <th>Price</th>
    <th>Size</th>
    <th>Summary</th>
    <th>Hot</th>
    <th>Active</th>
    <th>Thao tác</th>
</tr>
<?php $stt = 1 ?>
<?php if($list) foreach($list as $product): ?>
<tr>
    <td class="center"><?php echo $stt++ ?></td>
    <td><?php echo $product['pro_name']?></td>
    <td><?php echo $product['pro_cat_id']?></td>
    <td><?php echo $product['pro_price']?></td>
    <td><?php echo $product['pro_size']?></td>
    <td><?php echo $product['pro_summary']?></td>
    <td class="center"><input class="hot" id="<?php echo base64_encode($product['pro_id'])?>" type="checkbox" <?php echo ($product['pro_hot']) ? 'checked' : ''?> /></td>
    <td class="center"><input class="activ" id="<?php echo base64_encode($product['pro_id'])?>" type="checkbox" <?php echo ($product['pro_active']) ? 'checked' : ''?> /></td>
    <td class="center" id="<?php echo base64_encode($product['pro_id'])?>"><a class="editBtn" href="editProduct?id=<?php echo base64_encode($product['pro_id'])?>"><i class="icon-edit"></i>Edit</a>&nbsp;&nbsp;<a href="#" class="deleteBtn"><i class="icon-remove"></i>Delete</a></td>
</tr>
<?php endforeach; ?>
</table>
<script>
//Hot
    $('.hot').click(function(){
        $.ajax({
            type:'POST',
            url:'quickEdit',
            data:{'id':$(this).attr('id'),'action':'hot'},
            dataType:'json',
            success:function(result){
                if(result.success != ''){
                    TooltipPro('.mytooltip-alert','.listing',result.success);
                }
                else{
                    $('.thongbao').append('<div class="alert alert-error fade in">'+result.error+'<a class="close" data-dismiss="alert">&times;</a></div>');
                }
            }
        });
    });
    //Active
    $('.activ').click(function(){
        $.ajax({
            type:'POST',
            url:'quickEdit',
            data:{'id':$(this).attr('id'),'action':'active'},
            dataType:'json',
            success:function(result){
                if(result.success != ''){
                    TooltipPro('.mytooltip-alert','.listing',result.success);
                }
                else{
                    $('.thongbao').append('<div class="alert alert-error fade in">'+result.error+'<a class="close" data-dismiss="alert">&times;</a></div>');
                }
            }
        });
    });
    
    //Xóa record
    $('.deleteBtn').click(function(){
        $tr_current = $(this).closest('tr');
        $.ajax({
            type:'POST',
            url:'deleteProduct',
            data:{'id':$(this).closest('td').attr('id')},
            dataType:'json',
            success:function(result){
                if(result.success != ''){
                    TooltipPro('.mytooltip-alert','.listing',result.success);
                    $tr_current.remove();
                }
                else{
                    $('.thongbao').append('<div class="alert alert-error fade in">'+result.error+'<a class="close" data-dismiss="alert">&times;</a></div>');
                }
            }
        });
    });
    TooltipOut('.mytooltip-alert','.listing');
</script>